/*eslint-disable*/
// eslint-disable-next-line
import '../App.css';
import '../style/public.css';
import React, { Component }  from 'react';
import { BrowserRouter as RouterL, Route, Link } from "react-router-dom";
import {Layout, Menu, Breadcrumb, Icon} from 'antd';
import Router from './router/index'
import LoginPage from './page/login'
const {Header, Content, Footer, Sider,} = Layout;
const SubMenu = Menu.SubMenu;

const AppRouter = () => {
    let routerList = []
    Router.routes.forEach(item => {
        if(item.hasSub){
            routerList.push(...item.subMenu)
        }else{
            routerList.push(item)
        }
    })
    return (routerList.map((route) => <Route key={route.path} path={route.path} component={route.component} />))
};


class SiderDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLogin:　0,
            userName:'',
        };
        this.logOut = this.logOut.bind(this);
    }
    state = {
        collapsed:true
    };
    componentDidMount() {
        let loginData = localStorage.getItem("loginState")
        let isLogin = loginData ? JSON.parse(loginData).isLogin * 1 : 0
        this.setState({
            isLogin: isLogin,
            userName: loginData ? JSON.parse(loginData).name  : ""
        });
    }

    onCollapse = (collapsed) => {
        this.setState({collapsed});
    }

    logOut(){
        let loginData = localStorage.getItem("loginState")
        let remember = loginData ? JSON.parse(loginData).remember * 1 : 0
        if(!remember){
            localStorage.removeItem("loginState")
        }
        this.setState({
            isLogin: 0
        });
    }


    render() {
        return this.state.isLogin == 1 ?(
            <RouterL>
                <Layout style={{minHeight: '100vh'}}>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div className="header-logo">
                            <Icon type="github" />
                        </div>
                        <Menu theme="dark" mode="inline">
                            {
                                Router.routes.map(function (post, index) {
                                        return post.hasSub ? (
                                            <SubMenu
                                                key={index}
                                                title={<span><Icon type={post.icon}/><span>{post.name}</span></span>}
                                            >
                                                {
                                                    post.subMenu.map(function (item1, number) {
                                                        return (
                                                            <Menu.Item key={item1.name}
                                                                       id={item1.name}>
                                                                <Link to={item1.path}>{item1.name}</Link>
                                                            </Menu.Item>
                                                        );
                                                    })
                                                }
                                            </SubMenu>
                                        ) : (
                                            <Menu.Item key={index}>
                                                <Link to={post.path}>
                                                    <Icon type={post.icon}/>
                                                    <span>{post.name}</span>
                                                </Link>
                                            </Menu.Item>
                                        )
                                    }
                                )
                            }
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{background: '#fff', padding: 0}}>
                            <div className='m_l_20'>小蜜蜂财务管理系统</div>
                            <div className='user_icon'>
                                <span>{this.state.userName}</span>
                                <span className='m_l_16 cur_pointer color_yellow' onClick={this.logOut}>退出<Icon type="login" /></span>
                            </div>
                        </Header>
                        <Content style={{margin: '16px 16px'}}>
                            <div style={{padding: 24, background: '#fff', minHeight: 290}}>
                                <AppRouter />
                            </div>
                        </Content>
                        <Footer style={{textAlign: 'center'}}>
                            CopyRight ©2019 Created by zj
                        </Footer>
                    </Layout>
                </Layout>
            </RouterL>
        ) : (<LoginPage />);
    }
}


export default SiderDemo;


